<template>
  <div>
    <!-- tab基本信息表单  -->
    <el-scrollbar style="height: 100%">
      <vxe-toolbar perfect>
        <template #buttons>
          <vxe-button type="text" class="button-blue" icon="vxe-icon-square-plus" content="新建" @click="saveEvent"></vxe-button>
          <vxe-button type="text" icon="vxe-icon-save" content="保存" :loading="saveLoading" class="button-blue margin-left-sm" @click="saveEvent"></vxe-button>
        </template>
      </vxe-toolbar>
      <el-form ref="formRef" :model="formData" :rules="formRules" label-width="100px" inline-message>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="起始节点" prop="code">
              <el-input v-model="formData.code" placeholder="请输入编码" clearable :disabled="formData.isSysAtt === true"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="终止节点" prop="nodeName">
              <el-input v-model="formData.nodeName" placeholder="请输入名称" clearable :disabled="formData.isSysAtt === true"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="节点顺序" prop="seq">
              <el-input v-model="formData.seq" placeholder="请输入顺序" clearable :disabled="formData.isSysAtt === true"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="病人类型" prop="isShowState">
              <el-input v-model="formData.code" placeholder="请输入编码" clearable :disabled="formData.isSysAtt === true"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="报告单元" prop="isCreatReceipt">
              <el-input v-model="formData.code" placeholder="请输入编码" clearable :disabled="formData.isSysAtt === true"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="条码类别" prop="isPrintReceipt">
              <el-input v-model="formData.code" placeholder="请输入编码" clearable :disabled="formData.isSysAtt === true"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="收费项目" prop="isBilling">
              <el-input v-model="formData.code" placeholder="请输入编码" clearable :disabled="formData.isSysAtt === true"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="标本类型" prop="isSysAtt">
              <el-input v-model="formData.code" placeholder="请输入编码" clearable :disabled="formData.isSysAtt === true"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="最小时间" prop="isRollback">
              <el-input v-model="formData.code" placeholder="请输入编码" clearable :disabled="formData.isSysAtt === true"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="assemblyName" label="最大时间">
              <el-input v-model="formData.code" placeholder="请输入编码" clearable :disabled="formData.isSysAtt === true"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="开始时段" prop="isRollback">
              <el-input v-model="formData.code" placeholder="请输入编码" clearable :disabled="formData.isSysAtt === true"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="assemblyName" label="结束时段">
              <el-input v-model="formData.code" placeholder="请输入编码" clearable :disabled="formData.isSysAtt === true"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="预警时间" prop="isRollback">
              <el-input v-model="formData.code" placeholder="请输入编码" clearable :disabled="formData.isSysAtt === true"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="assemblyName" label="警告时间">
              <el-input v-model="formData.code" placeholder="请输入编码" clearable :disabled="formData.isSysAtt === true"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="紧急" prop="isInterface">
              <el-switch v-model="formData.isInterface" inline-prompt active-text="是" inactive-text="否" @change="switIsInterfaceCreatReceipt"></el-switch>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-scrollbar>
  </div>
</template>

<script lang="ts" setup>
// 引入组件区 ==========
import { ref, reactive, onMounted, getCurrentInstance, watch, PropType } from 'vue';
import { VXETable, VxeFormPropTypes, VxeButtonEvents } from 'vxe-table';
import { VxeMessage, VxeNotifyType } from '../../../utils/CommonMessage';
import { AppStore } from '../../../stores/store';
import { funBdsJsResult } from '@/utils/Expression'; //函数公式
import SelectDataList from '@/components/SelectDataList.vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import type { Action } from 'element-plus';
let store = AppStore();
// 全局变量定义区 ==========
let { proxy }: any = getCurrentInstance();

let showInterface = ref(false); //是否有界面
let showProcessAttValue = ref(false); //是否标本退回

const formRef = ref(); //表单ref标记
// 表单绑定的数据
let formData = reactive({
  id: '' /*主键*/,
  name: '' /*编号*/,
  snode: '' /*名称*/,
  enode: '' /*节点对应的界面路径*/,
  rptGroup: 0 /*序号*/,
  barcodeType: '' /*界面名称*/,
  feeItem: '' /*界面名称code*/,
  sampleType: false /*是否有生成交接单功能*/,
  patType: false /*是否有打印交接单功能*/,
  isUrgent: false /*是否有界面*/,
  minNum: false /*是否计费*/,
  maxNum: false /*是否系统节点*/,
  sTime: false /*是否有标本回退功能*/,
  eTime: '' /*标本回退对应的值*/,
  preWarnTime: '' /*组织机构id*/,
  warnTime: false,//状态码
  isTat: false/**是否启用TAT监控 */
});

// 表单校验规则
const formRules = reactive<VxeFormPropTypes.Rules>({
  code: [{ required: true, message: '请输入编码' }],
  nodeName: [{ required: true, message: '请输入名称' }]
});

let showErrorPage = ref(false); //选择界面
let showErrorFunc = ref(false); //选择功能

const EditExtraPropertiesRef = ref(null); //配置扩展属性弹框ref
// const collapseStatus = ref(false);

//暴露属性和方法
defineExpose({
  addNew,
  saveForm,
  clearFormData
});

// 父组件传值
let props = defineProps({
  currentRow: { type: Object as PropType<any>, required: true }
}) as any;
watch(
  () => props.currentRow,
  (nval, oval) => {
    Object.assign(formData, nval);
    // for (const key in nval) {
    //   if (Object.prototype.hasOwnProperty.call(nval, key)) {
    //     const element = nval[key];
    //     formData[key] = element;
    //   }
    // }
  },
  {
    deep: true,
    immediate: true
  }
);

// 方法定义区 =============
function addNew() {
  clearFormData(); // 清空表单
}

//**判断为空*/
function IsEmpty(value: any) {
  if (value === undefined || value === '' || value === null) {
    return true;
  }
  if (JSON.stringify(value) === '{}') {
    return true;
  }
  return false;
}

//是否有界面
function switIsInterfaceCreatReceipt(val) {
  //暂无业务逻辑
  if (!val) {
    formData.nodeUrl = '';
    formData.nodeUrlName = '';
    formData.interfaceCode = '';
  }
}
//是否标本退回
function handleSwitchChange(val) {
  if (!val) {
    formData.rollbackValue = '';
  }
}

//选择界面
function selectRow(row) {
  formData.nodeUrl = row.url;
  formData.nodeUrlName = row.name;
  formData.interfaceCode = row.code;
}

//清空界面
function clearRow() {
  formData.nodeUrl = '';
  formData.nodeUrlName = '';
  formData.interfaceCode = '';
}

//选择功能
function genusCodeSelect(row) {
  // console.log('rwew', row);

  formData.rollbackValue = row.value;
  //formData.assemblyName = row.name;
}
//清空功能
function genusCodeClear() {
  formData.rollbackValue = '';
  //formData.assemblyName = '';
}

// 自动生成助记符
// function autoInputCode() {
//   formData.inputCode = funBdsJsResult('firstPinYinFun', formData.germNa);
// }

// 清空表单
function clearFormData() {
  formData.id = '' /*主键*/;
  formData.code = '' /*编号*/;
  formData.nodeName = '' /*名称*/;
  formData.nodeUrl = '' /*节点对应的界面路径*/;
  formData.seq = 0 /*序号*/;
  formData.nodeUrlName = '' /*界面名称*/;
  formData.interfaceCode = '' /*界面名称code*/;
  formData.isCreatReceipt = false /*是否有生成交接单功能*/;
  formData.isPrintReceipt = false /*是否有打印交接单功能*/;
  formData.isInterface = false /*是否有界面*/;
  formData.isBilling = false /*是否计费*/;
  formData.isSysAtt = false /*是否系统节点*/;
  formData.isRollback = false /*是否有标本回退功能*/;
  formData.rollbackValue = '' /*标本回退对应的值*/;
  formData.orgId = '' /*组织机构id*/;
  formData.isShowState = false;
  formData.isTat = false;/**是否启用TAT监控 */
}

const openPage = () => {
  ElMessageBox.alert('请选择界面', '提示', {
    confirmButtonText: '确定'
  });
};
const openFunc = () => {
  ElMessageBox.alert('请选择功能', '提示', {
    confirmButtonText: '确定'
  });
};

// 保存
function saveForm(callback: any) {
  const el: any = proxy.$refs['formRef'];
  formRef.value?.validate((valid: any) => {
    if (!valid) {
      VxeMessage('校验表单失败', VxeNotifyType.error);
      return false;
    }
    if (formData.isInterface === true && !formData.nodeUrl) {
      openPage();
      showErrorPage.value = true;
      return false;
    }
    if (formData.isRollback === true && !formData.rollbackValue) {
      openFunc();
      showErrorFunc.value = true;
      return false;
    }

    let url = '';
    formData.orgId = store.userInfo.orgId;
    // 判断添加和编辑接口
    if (IsEmpty(formData.id)) {
      url = '/lab/process/set/addProcessInfo';
    } else {
      url = '/lab/process/set/updateProcessInfo';
    }
    proxy.$http
      .post(url, formData)
      .then((res: any) => {
        if (res.status.code === 1) {
          if (!IsEmpty(formData.id)) {
            proxy.$emit('getProcessSetList');
            VxeMessage('修改成功', VxeNotifyType.success);
          } else {
            proxy.$emit('getProcessSetList');
            VxeMessage('新建成功', VxeNotifyType.success);
          }
          if (callback) {
            callback(true);
          }
        } else {
          if (!IsEmpty(formData.id)) {
            proxy.$emit('getProcessSetList');
            VxeMessage('修改失败', VxeNotifyType.error);
          } else {
            proxy.$emit('getProcessSetList');
            VxeMessage('新建失败', VxeNotifyType.error);
          }
          if (callback) {
            callback(false);
          }
        }
      })
      .catch((err: any) => {
        VxeMessage('新建异常', VxeNotifyType.error);
        if (callback) {
          callback(false);
        }
      });
  });
}
/**新建事件 */
function saveEvent() {
  //todo
}
</script>

<style lang="scss" scoped>
// 中等尺寸时 配置扩展属性按钮
.el-button--default {
  padding: 5px 11px;
}

.el-tag {
  color: $base-white;
}
.error-message {
  color: red;
  margin: -9px 4px;
}
</style>
